<script setup>
import { useStore } from 'vuex'
import { ref, defineEmits } from 'vue';
import service from '../utils/request';
import { ElMessage } from 'element-plus'
const optype = ref(-1);
const store = useStore();
const code = ref("");
const showmodal = (e) => {
  console.log(e, "eee")
  optype.value = e
  form.value = {}
  getcode(0)
}
const getcode = (e) => {
  if (e == 0) {
    code.value = "/api/checkcode?type=0&&time=" + new Date().getTime()
  } else {
    code1.value = "/api/checkcode?type=1&&time=" + new Date().getTime()

  }

}
const emits = defineEmits(['addEvent'])
defineProps({
  msg: String,
  optype: Number,
})
defineExpose({ showmodal })
console.log(optype)
const handleClose = () => {
  optype.value = -1
  store.commit("setshowlogin", false)
}
const handleClose1 = () => {
  optype.value = -1
  store.commit("setshowlogin", false)
}
const login = async () => {
  const res = await service.get("/login", {
    params: form.value
  })
  console.log(res);
  if (res.code == 1) {
    store.commit("setuserInfo", res.data)
    console.log(store.state.userInfo)
    optype.value = -1
  } else {
    ElMessage({
            message: res.msg,
            type: 'warning',
            plain: true,
          })
    form.value = {};
    getcode(0)
  }


}
const registerform = ref();
const rules = {
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },

  ],
  emailCode: [
    { required: true, message: '请输入邮箱验证码', trigger: 'blur' },

  ],
  nickName: [
    { required: true, message: '请输入昵称', trigger: 'blur' },

  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },

  ],
  qrpassword: [
    { required: true, message: '请输入确认密码', trigger: 'blur' },

  ],
  checkcode: [
    { required: true, message: '请输入验证码', trigger: 'blur' },

  ]

}
const rules1 = [{
  checkcode: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
  ]
}]
const register = () => {

  registerform.value.validate(async (valid) => {
    console.log(valid)
    if (valid) {
      if (form.value.qrpassword !== form.value.password) {
        ElMessage({
          message: '两次密码不一致',
          type: 'warning',
          plain: true,
        })
      } else {
        delete form.value.qrpassword
        const res = await service.get("/register", {
          params: form.value
        })
        console.log(res)
        if (res.code == 1) {
          ElMessage({
            message: '注册成功',
            type: 'success',
            plain: true,
          })
          optype.value=-1;

        }else{
          ElMessage({
            message: res.msg,
            type: 'warning',
            plain: true,
          })
          getcode(0)
        }

      }
    }
  })

}
const code1 = ref();
const form = ref({});
const form1 = ref({});
const getemailvisible = ref(false)
const getemailvisible1 = ref(false)
const handleClose2 = () => {
  getemailvisible.value = false
}

const handleClose3 = () => {
  getemailvisible1.value = false
}
const getemailform = ref();
const sendcode = () => {
  getemailform.value.validate(async (valid) => {
    if (!valid) {
      return
    }
    const res = await service.get("/sendEmailCode", {
      params: {
        email: form1.value.email,
        checkCode: form1.value.checkcode,
        type: 0
      }
    })
    console.log(res);
    if (res.code == 1) {
      getemailvisible.value = false

    } else {
      ElMessage({
            message: res.msg,
            type: 'warning',
            plain: true,
          })
      getcode(1)
    }

  })
}
const sendcode1 = () => {
  getemailform.value.validate(async (valid) => {
    if (!valid) {
      return
    }
    const res = await service.get("/sendEmailCode", {
      params: {
        email: form1.value.email,
        checkCode: form1.value.checkcode,
        type: 1
      }
    })
    console.log(res);
    if (res.code == 1) {
      getemailvisible1.value = false

    } else {
      ElMessage({
            message: res.msg,
            type: 'warning',
            plain: true,
          })
      getcode(1)
    }

  })
}
const hqyzm = () => {
  registerform.value.validateField("email", (valid) => {
    if (!valid) {
      return
    }
    form1.value.email = form.value.email
    form1.value.checkcode = ""
    getemailvisible.value = true
    getcode(1)
  })
}
const hqyzm1 = () => {
  registerform.value.validateField("email", (valid) => {
    if (!valid) {
      return
    }
    form1.value.email = form.value.email
    form1.value.checkcode = ""
    getemailvisible1.value = true
    getcode(1)
  })
}

const haszh=()=>{
  optype.value=0
  form.value={}

}
const wjmm=()=>{
  optype.value=2;
  form.value={}
}
const qzc=()=>{
  optype.value=1
  form.value={}

}
const tologin=()=>{
  optype.value=0
  form.value={}

}
const czmm=()=>{
  registerform.value.validate(async(valid) => {
    if (!valid) {
      return
    }
    const res = await service.get("/resetpwd", {
      params: {
        // String email,String password,String checkcode,String emailcode
        email: form.value.email,
        checkcode: form.value.checkcode,
        emailcode:form.value.emailCode,
        password: form.value.password,
 
      }
    })
    console.log(res);
    if (res.code == 1) {
      optype.value=-1
      store.commit("setshowlogin", false)

    } else {
      ElMessage({
            message: res.msg,
            type: 'warning',
            plain: true,
          })
      getcode(0)
    }

  })
}
</script>

<template>
  <div>
    <el-dialog title="重置密码" width="500"  :append-to-body="true" :close-on-click-modal="false"  :close-on-press-escape="false" :before-close="handleClose1" :model-value="optype == 2 ? true : false">
      <el-form :model="form" ref="registerform" label-width="auto" :rules="rules" style="max-width: 600px">
        <el-form-item label="用户名" prop="email">
          <el-input v-model="form.email" />
        </el-form-item>
        <el-form-item label="验证码" prop="emailCode">
          <el-input v-model="form.emailCode" style="width: 60%;margin-right: 10px;" /> <el-button @click="hqyzm1"
            type="primary">获取验证码</el-button>
        </el-form-item>
      
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" type="password" />
        </el-form-item>
        <el-form-item label="确认密码" prop="qrpassword">
          <el-input v-model="form.qrpassword"  type="password" />
        </el-form-item>
        <el-form-item label="验证码" prop="checkcode">
          <el-input v-model="form.checkcode" style="width: 60%;" /> <img @click="getcode(0)" :src="code" alt="" srcset="">
        </el-form-item>


      </el-form>
      <div class="flex">
        <div @click="tologin" style="cursor: pointer;">去登陆？</div>
        <div></div>
      </div>
      <el-button type="primary" @click="czmm()" style="width: 100%;">
        重置密码
      </el-button>
    </el-dialog>
    <el-dialog title="获取邮箱验证码"  :append-to-body="true" :close-on-click-modal="false"  :close-on-press-escape="false"  width="500" :before-close="handleClose2" :model-value="getemailvisible">
      <el-form :model="form1" label-width="auto" ref="getemailform" :rules="rules1" style="max-width: 600px">
        <el-form-item label="邮箱">
          {{ form1.email }}
          <!-- <el-input v-model="form1.email" /> -->
        </el-form-item>
        <el-form-item label="验证码" prop="checkcode">
          <el-input v-model="form1.checkcode" style="width: 60%;" /> <img @click="getcode(1)" :src="code1" alt="" srcset="">
        </el-form-item>
        <el-button type="primary" @click="sendcode" style="width: 100%;">
          发送邮箱验证码
        </el-button>
      </el-form>
    </el-dialog>
    <el-dialog title="获取邮箱验证码"  :append-to-body="true" :close-on-click-modal="false"  :close-on-press-escape="false"  width="500" :before-close="handleClose3" :model-value="getemailvisible1">
      <el-form :model="form1" label-width="auto" ref="getemailform" :rules="rules1" style="max-width: 600px">
        <el-form-item label="邮箱">
          {{ form1.email }}
          <!-- <el-input v-model="form1.email" /> -->
        </el-form-item>
        <el-form-item label="验证码" prop="checkcode">
          <el-input v-model="form1.checkcode" style="width: 60%;" /> <img @click="getcode(1)" :src="code1" alt="" srcset="">
        </el-form-item>
        <el-button type="primary" @click="sendcode1" style="width: 100%;">
          发送邮箱验证码
        </el-button>
      </el-form>
    </el-dialog>
    <el-dialog title="注册" width="500"  :append-to-body="true" :close-on-click-modal="false"  :close-on-press-escape="false" :before-close="handleClose1" :model-value="optype == 1 ? true : false">
      <el-form :model="form" ref="registerform" label-width="auto" :rules="rules" style="max-width: 600px">
        <el-form-item label="用户名" prop="email">
          <el-input v-model="form.email" />
        </el-form-item>
        <el-form-item label="验证码" prop="emailCode">
          <el-input v-model="form.emailCode" style="width: 60%;margin-right: 10px;" /> <el-button @click="hqyzm"
            type="primary">获取验证码</el-button>
        </el-form-item>
        <el-form-item label="昵称" prop="nickName">
          <el-input v-model="form.nickName" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" type="password" />
        </el-form-item>
        <el-form-item label="确认密码" prop="qrpassword">
          <el-input v-model="form.qrpassword"  type="password" />
        </el-form-item>
        <el-form-item label="验证码" prop="checkcode">
          <el-input v-model="form.checkcode" style="width: 60%;" /> <img @click="getcode(0)" :src="code" alt="" srcset="">
        </el-form-item>


      </el-form>
      <div class="flex">
        <div @click="haszh" style="cursor: pointer;">已有账号？</div>
        <div></div>
      </div>
      <el-button type="primary" @click="register()" style="width: 100%;">
        注册
      </el-button>
    </el-dialog>
    <el-dialog title="登录" width="500" :append-to-body="true" :close-on-click-modal="false"  :close-on-press-escape="false" :before-close="handleClose" :model-value="optype == 0 ? true : false">
      <el-form :model="form" label-width="auto" style="max-width: 600px">
        <el-form-item label="用户名">
          <el-input v-model="form.email" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.password" type="password" />
        </el-form-item>
        <el-form-item label="验证码">
          <el-input v-model="form.checkcode" style="width: 60%;" /> <img :src="code" @click="getcode(0)" alt="" srcset="">
        </el-form-item>
      </el-form>
      <div class="flex">
        <div style="cursor: pointer;" @click="wjmm">忘记密码？</div>
        <div @click="qzc" style="cursor: pointer;">去注册</div>
      </div>

      <el-button type="primary" @click="login" style="width: 100%;">
        登录
      </el-button>


    </el-dialog>

  </div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}

.flex {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.flex div {
  color: #007fff;
}
</style>
